<template>
  <div>
    <!-- 插槽:
    1.在子组件中需要自定义的地方使用 <slot /> 占位
    2. 在父组件中使用子组件时, 开闭标签中间传入要自定义的结构
    好处: 让组件变得更灵活
    
    具名插槽:
    1. 在 slot 上使用 name 来区分不同的插槽
    2. 传入时使用 <template></template> 包裹住要传入的结构, 使用


     -->
    <MyDialog>
      <template #header>
        <h1>插槽很快,但比我爽爽还是差点儿意思</h1>
      </template>
      <template #content>
        <h1>给爽爽吃鸡儿</h1>
      </template>
      <!-- 2. 在父组件中使用插槽时, template 上通过 v-slot:插槽名="变量名" -->
      <!-- 业内很多人习惯叫 scope 变量名 -->
      <!-- <template #bottom="变量名"> -->
        <!-- obj 变量只能在 template 中使用, 超出这个范围就无法使用了, 所以叫作用域变量 -->
      <template #bottom="obj">
        <!-- 确认按钮和取消按钮的值从子组件传递过来 -->
        <button>{{ obj.yes }}</button>
        <button>{{ obj.no }}</button>
      </template>
    </MyDialog>
    <MyDialog>
      <p>插槽很快,但比我爽爽还是差点儿意思</p>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  components: {
    MyDialog
  },
  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>